<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>菜单管理 - 派后台管理系统</title>
    <link rel="icon" href="__ADMIN_PATH__favicon.ico" type="image/ico">
    <meta name="keywords" content="派后台管理系统">
    <meta name="description" content="派后台管理系统">
    <meta name="author" content="cfn">
    <link href="__ADMIN_PATH__css/bootstrap.min.css" rel="stylesheet">
    <link href="__ADMIN_PATH__css/materialdesignicons.min.css" rel="stylesheet">
    <link href="__ADMIN_PATH__css/style.min.css" rel="stylesheet">
    <style>
        .mobile-header{
            background: url('__ADMIN_PATH__images/wx-header.png') no-repeat;
            background-size: 100%;
            height: 64px;
            width: 360px;
        }
        .mobile-footer{
            background: url('__ADMIN_PATH__images/wx-footer2.png') no-repeat;
            background-size: 100%;
            height: 50px;
            width: 360px;
            padding-left: 45px;
            position: absolute;
        }
        .mobile-body{
            width: 360px;
            height: 480px;
            background: #ededed;
        }
        .menu-ul > .menu-li{
            text-align: center;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            flex: 1 1 auto;
            position: relative;
            list-style: none;
            display:inline;
            border-width: 1px;
            border-style: solid;
            border-color: transparent rgb(231, 231, 235) transparent transparent;
            border-image: initial;
            border-right: 1px solid rgb(231, 231, 235);
        }
        .menu-ul{
            padding-left: 0px;
            display: flex;
        }
        .sub-menu {
            position: absolute;
            border-radius: 3px;
            display: block;
            bottom: 60px;
            width: 100%;
            background-color: #fafafa;
        }
        .sub-menu ul{
            margin-left: 0px;
            padding-left: 0px;
        }
        .sub-menu li{
            text-align: center;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            flex: 1 1 auto;
            position: relative;
            list-style: none;
            border: 1px solid #e7e7eb;
        }
    </style>
</head>
<body>
<div class="container-fluid p-t-15" id="app">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4 style="line-height: 38px;">公众号菜单管理</h4>
                    <button class="btn btn-primary" @click="saveMenu()" style="width: 100px;margin-left: 145px;">保存发布</button>
                </div>
                <div class="card-body row">
                    <div class="col-sm-3" style="min-width: 400px;">
                        <div class="mobile-header"></div>
                        <div class="mobile-body">
                        </div>
                        <div class="mobile-footer">
                            <ul class="menu-ul">
                                <li v-for="(menu,index) in menus" class="menu-li">
                                    <span @click="activeMenu(menu,index,null)">{{menu.name || '一级菜单'}}</span>
                                    <div class="sub-menu">
                                        <ul>
                                            <li v-for="(child, cindex) in menu.sub_button.list" @click="activeMenu(child,cindex,index)">
                                                <span>{{child.name || '二级菜单' }}</span>
                                            </li>
                                            <li v-if="menu.sub_button.list.length < 5" @click="addChild(menu,index)"><span class="mdi mdi-plus"></span></li>
                                        </ul>
                                    </div>
                                </li>
                                <li v-if="menus.length < 3" class="menu-li" @click="addMenu()"><span class="mdi mdi-plus"></span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="card" style="border: 1px solid #ccc; min-height: 600px;max-width: 400px;">
                            <div class="card-header">
                                <h4>公众号菜单设置</h4>
                                <a @click="delMenu()" style="float: right;">删除</a>
                            </div>
                            <div class="card-body" v-if="curMenuId != null">
                                <form class="form-horizontal" onsubmit="return false;">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" style="width: 90px;">菜单名称</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="name" id="name" v-model="curMenu.name" placeholder="请输入文字内容"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label" for="type" style="width: 90px;">菜单类型</label>
                                        <div class="col-md-9">
                                            <select id="type" name="type" class="form-control" @change="typeChange" v-model="curMenu.type">
                                                <option value="click" selected>关键字</option>
                                                <option value="view">跳转网页</option>
                                                <option value="miniprogram">小程序</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" v-if="curMenu.type=='click'">
                                        <label class="col-md-3 control-label" for="key" style="width: 90px;">关键字</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" name="key" id="key" placeholder="请输入关键字" v-model="curMenu.key"/>
                                        </div>
                                    </div>
                                    <div class="form-group" v-if="curMenu.type=='view'">
                                        <label class="col-md-3 control-label" for="url" style="width: 90px;">链接</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="url" name="url" v-model="curMenu.url"/>
                                        </div>
                                    </div>
                                    <div class="form-group" v-if="curMenu.type=='miniprogram'">
                                        <label class="col-md-3 control-label" for="appid" style="width: 90px;">APPID</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="appid" name="appid" v-model="curMenu.appid"/>
                                        </div>
                                    </div>
                                    <div class="form-group" v-if="curMenu.type=='miniprogram'">
                                        <label class="col-md-3 control-label" for="pagepath" style="width: 90px;">页面路径</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="pagepath" name="pagepath" v-model="curMenu.pagepath"/>
                                        </div>
                                    </div>
                                    <div class="form-group" v-if="curMenu.type=='miniprogram'">
                                        <label class="col-md-3 control-label" for="url" style="width: 90px;">小程序链接</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="url" name="url" v-model="curMenu.url"/>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__ADMIN_PATH__js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/bootstrap.min.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/main.min.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/vue/vue.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="__ADMIN_PATH__js/lightyear.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                menus:{$menus|raw},
                curMenu:{
                    type:'click',
                    name:'',
                },
                curParentMenuId:null,
                curMenuId:null,
            }
        },
        methods: {
            defaultMenusData:function(){
                return {
                    type:'click',
                    name:'',
                    sub_button:{
                        list:[]
                    }
                };
            },
            defaultChildData:function(){
                return {
                    type:'click',
                    name:''
                };
            },
            addChild:function(menu,index){
                if (!this.canSave()) return;
                var data = this.defaultChildData(),id = menu.sub_button.length;
                menu.sub_button.list.push(data);
                this.curMenu = data;
                this.curParentMenuId = id;
                this.curMenuId = index;
            },
            addMenu:function () {
                if (!this.canSave()) return;
                var data = this.defaultMenusData(),id = this.menus.length;
                this.menus.push(data);
                this.curMenu = data;
                this.curMenuId = id;
                this.curParentMenuId = null;
            },
            delMenu:function (index) {
                this.curParentMenuId === null ?
                    this.menus.splice(this.curMenuId,1) : this.menus[this.curParentMenuId].sub_button.list.splice(this.curMenuId,1);
                this.curParentMenuId = null;
                this.curMenu = {};
                this.curMenuId = null;
            },
            typeChange:function () {
                this.type =  $('#type').val();
            },
            activeMenu:function (menu,index,pindex) {
                if (!this.canSave()) return;
                pindex === null ? (this.curMenu = menu) : (this.curMenu = this.menus[pindex].sub_button.list[index],this.curParentMenuId = pindex);
                this.curMenuId = index;
            },
            saveMenu:function()
            {
                $.post(url="/admin/wechat.wechat_menu/send",data={menus:this.menus},function (res) {
                    if (res.code == 200) lightyear.notify(res.msg, 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    else lightyear.notify(res.msg, 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
                });
            },
            canSave:function () {
                if(this.curMenuId === null) return true;
                if (this.curMenu.name == "")
                {
                    lightyear.notify("菜单名称不能为空！", 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
                    return false;
                }
                switch (this.curMenu.type) {
                    case 'click':
                        if (!this.curMenu.key)
                        {
                            lightyear.notify("关键字不能为空！", 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
                            return false;
                        }
                        break;
                    case 'view':
                        if (!this.curMenu.url)
                        {
                            lightyear.notify("链接不能为空！", 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
                            return false;
                        }
                        break;
                    case 'miniprogram':
                        if (!this.curMenu.appid)
                        {
                            lightyear.notify("APPID不能为空！", 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
                            return false;
                        }
                        if (!this.curMenu.pagepath)
                        {
                            lightyear.notify("小程序路径不能为空！", 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
                            return false;
                        }
                        break;
                }
                return true;
            },
        }
    });
</script>
</body>
</html>